<!DOCTYPE>
<html>
<head>
<title>jQuery拖拽插件drag.js </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/drag.js"></script>
<script>
$(function(){
	
	$(document).on('mousedown','.drag-box.drag-box-6',function(e)
	{
		if(e.button==2){event.returnvalue=false;return}//屏蔽右键
		var $this=$(this);
		var style="style='left:"+($this.width()-100)/2+";top:"+($this.height()-100)/2;
		var Adiv=$("<div class='drag' index='"+$(this).find("> div").length+"' "+style+"'><ul class='ul'><div><input type='button' value='确定'> <input type='button' value='取消' ></div></ul></div>")
		$this.append(Adiv);
		
		Adiv.mousedown(function(e){
			e.stopPropagation();//阻止事件分发
		})
	
		var divs=Adiv.myDrag({
				changewh:1,
				parent:'.drag-box.drag-box-6',
				handler:".ul",
				initxy:{x:e.pageX,y:9},
				dragStart:function(x,y){
					//$('.lg span').html('').eq(0).html('开始拖动了! — 坐标 x：'+x+' y：'+y);
				},
				dragEnd:function(x,y){
					//$('.lg span').html('').eq(1).html('停止拖动了! — 坐标 x：'+x+' y：'+y);
				},
				dragMove:function(x,y){
					$('.lg span').html('').eq(2).html('拖动中! — 坐标 x：'+x+' y：'+y);
				}
			});
		
		Adiv.on('click','input:eq(0)',function(e){
			var left={};//左上角的百分比
			left.x=Adiv.position().left/$this.width();
			left.y=Adiv.position().top/$this.height();
			var right={};//右上角的百分比
			right.x=(Adiv.position().left+Adiv.width())/$this.width();
			right.y=(Adiv.position().top+Adiv.height())/$this.height();
			console.log(left)
			console.log(right)
			Adiv.remove();
		})
		
		Adiv.on('click','input:eq(1)',function(e){
			Adiv.remove()
		})	
	})
	
	
	
});
</script>
</head>
<body>
	<h1 style="border:#06C dashed 1px">drag插件<span>by zyp</span></h1>

	<h3>Demo6：</h3>
	<div class='log'>
		<div class='lg log-1'>开始log：<span></span></div>
		<div class='lg log-2'>结束log：<span></span></div>
		<div class='lg log-3'>进行log：<span></span></div>
	</div>
	<div class='drag-box drag-box-6' onContextMenu="event.returnValue=false;return false;">
<!--<div class='drag drag-6'><img src="img/03.jpg"></div>

	<div class='drag'>
        <ul class="ul">
        <li> X </li>
        </ul>
    </div>
-->	
        
	</div>
    
</body>
</html>